@import "./base.scss";

$rem-24: 0.24rem;
.detail-container{
    height: 100%;
    overflow: hidden;
    padding: 1rem $rem-24 1.5rem $rem-24; 
    .top-bar{
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        font-family: $f-Regular;
        font-size: .32rem;
        color: $c-2a;
        letter-spacing: .05rem;
        text-align: center;
        padding: .2rem .24rem;
        z-index: 9;
        background: white;
        .goback{
            position: absolute;
            left: 0;
            top: 0;
            height: 100%;
            width: 1rem;
            background: url("../images/icon/icon_16.png") no-repeat;
            background-size: .16rem .32rem;
            background-position: .24rem center;
        }
    }

    .swiper1{
        z-index: 0;
    }
    //滑动层
    .scroll-wrapper{
        position: absolute;
        top: 4.6rem;
        bottom: 0;
        right: 0;
        left: 0;
        padding: 0 .24rem;
        overflow: visible;
        .scroll-content{
            padding-bottom: 1rem;
            background: white;
            >.title{
                padding: .15rem 0;
                @include bottom-border-1px($c-ef);
                p{
                    line-height: .6rem;
                    color: $c-99;
                    font-size: .24rem;
                    font-family: $f-Regular;
                    &.name{
                        font-size: .3rem;
                        font-family: $f-Medium;
                        color: $c-33;
                   }
               }
               .price{
                   font-size: .34rem;
                   color: $c-33;
                   font-family: $f-Medium;
                   
               }
            }
            // 基本参数
            h3{
                font-size: .28rem;
                font-family: $f-Bold;
                color: $c-33;
                margin: .3rem 0;
            }
            .icon{
                @include bottom-border-1px($c-ef);
                padding-bottom: .3rem;
                .left{
                    height: 1.7rem;
                    width: 3.31rem;
                    border-radius: $radius-10;
                    background: url("../images/index/img_7.png");
                    background-size: 100%;
                }
                .right{
                    height: 1.7rem;
                    width: 3.31rem;
                    font-family: $f-Regular;
                    font-size: .24rem;
                    color: $c-33;
                    padding: .1rem 0;
                    p{
                        padding: 0 .52rem;
                        background-position: left center;
                        background-repeat: no-repeat;
                       &:nth-child(1){
                           background-image: url("../images/icon/icon_11.png");
                           background-size: .28rem .28rem;
                       }
                       &:nth-child(2){
                        background-image: url("../images/icon/icon_13.png");
                        background-size: .22rem .30rem;
                       }
                       &:nth-child(3){
                        background-image: url("../images/icon/icon_12.png");
                        background-size: .26rem .29rem;
                      }
                    }
                    
                }

            }

            //规格
            .size-box{
                padding-bottom: .1rem;
                @include bottom-border-1px($c-ef);
                .flex-r-b{
                    flex-wrap: wrap;
                }
                .radio-label{
                    display: block;
                    text-align: center;
                    color: $c-33;
                    font-size: .26rem;
                    font-family: $f-Regular;
                    margin-bottom: .3rem;
                    input[type='radio']{
                        position: absolute;
                        left: -9999rem;
                    }
                    .size-checked{
                        display: block;
                        height: .65rem;
                        width: 3.35rem;
                        background: $c-fa;
                        border-radius: .32rem;
                        line-height: .65rem;
                    }
                    input[type='radio']:checked + span{
                        color: white;
                        background: $c-ffba17;
                        animation: scaleSize .5s;
                    }
                }
            }
            //介绍与评价
            .description-wrapper{
                overflow: hidden;
                padding-top:1.5rem;
                font-family: $f-Regular;
                .swiper2{
                    overflow: visible;
                    height: auto;
                }
                .swiper-pagination{
                    bottom:100%;
                    padding: .3rem 0; 
                    .swiper-pagination-bullet{
                        width: 3.5rem;
                        height: .76rem;
                        margin: 0;
                        line-height: .76rem;
                        font-size: .28rem;
                        background: $c-fb;
                        color: $c-33;
                        &:nth-child(1){
                            border-radius: .37rem 0 0 .37rem;
                        }
                        &:nth-child(2){
                            border-radius: 0 .37rem .37rem 0;
                        }
                    }
                    .swiper-pagination-bullet-active{
                        background: $c-ffba17;
                        color: white;
                    }
                }
                // 介绍页
                .tab1{
                    .title{
                        color: $c-33;
                        font-size: .28rem;
                        padding-bottom: .3rem;
                    }
                    .content{
                        p{
                            color: $c-99;
                            font-size: .26rem;
                            margin-bottom: .2rem;
                            span{
                                display: inline-block;
                            }
                        }
                        .img{
                            width: 100%;
                            height: 4.83rem;
                        }
                    }
                }
            }
        }
    }

    // 添加购物车
    .bottom-bar{
        position: fixed;
        .scaleCount{
            animation: scaleCount .5s;
        }
    }

    @keyframes scaleCount {
        50%{ transform: scale3d(1.5,1.5,1)}
    }
    @keyframes scaleSize{
        50%{
            transform: scale3d(1.05,1.05,1);
        }
    }
}